<template>
    <div class="app-container">
        <!-- 顶部导航标签 -->
        <el-tabs v-model="activeTopTab" @tab-change="handleTopTabChange">
            <el-tab-pane label="流程设置" name="flowSetting"></el-tab-pane>
            <el-tab-pane label="选项值设置" name="optionSetting"></el-tab-pane>
            <el-tab-pane label="权限设置" name="permissionSetting"></el-tab-pane>
        </el-tabs>

        <!-- 内容区域 -->
        <div class="content-wrapper">
            <!-- 流程设置内容 -->
            <template v-if="activeTopTab === 'flowSetting'">
                <div class="flow-setting">
                    <el-row>
                        <el-col :span="4" class="sidebar">
                            <el-menu default-active="expenseFlow" class="el-menu-vertical-demo"
                                @select="handleFlowMenuSelect">
                                <el-menu-item index="expenseFlow">支出流程</el-menu-item>
                                <el-menu-item index="invoiceFlow">开票流程</el-menu-item>
                                <el-menu-item index="refundFlow">退款流程</el-menu-item>
                            </el-menu>
                        </el-col>
                        <el-col :span="20" class="main-content">
                            <!-- 支出流程 -->
                            <template v-if="activeFlow === 'expenseFlow'">
                                <el-timeline>
                                    <el-timeline-item timestamp="任何人都可以进行申请" placement="top">
                                        <h3>提交支出申请</h3>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有支出审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>支出审核</h3>
                                        <el-switch v-model="expenseAudit1" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>支出二级审核</h3>
                                        <el-switch v-model="expenseAudit2" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>支出三级审核</h3>
                                        <el-switch v-model="expenseAudit3" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>支出四级审核</h3>
                                        <el-switch v-model="expenseAudit4" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有财务审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>财务审核</h3>
                                        <el-switch v-model="financialAudit" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有出纳确认权限，按提交人的所属部门来确定审核人。" placement="top">
                                        <h3>出纳确认</h3>
                                        <el-table :data="cashierConfirmTableData" border
                                            style="width: 100%; margin-top: 10px;">
                                            <el-table-column prop="id" label="序号" width="80"></el-table-column>
                                            <el-table-column prop="scope" label="审核权限范围"></el-table-column>
                                            <el-table-column prop="person" label="审核人"></el-table-column>
                                            <el-table-column prop="operation" label="操作" width="120"></el-table-column>
                                        </el-table>
                                    </el-timeline-item>
                                </el-timeline>
                            </template>

                            <!-- 开票流程 -->
                            <template v-if="activeFlow === 'invoiceFlow'">
                                <el-timeline>
                                    <el-timeline-item timestamp="任何人都可以进行申请" placement="top">
                                        <h3>提交开票申请</h3>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>开票审核</h3>
                                        <el-switch v-model="invoiceAudit1" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>开票二级审核</h3>
                                        <el-switch v-model="invoiceAudit2" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>开票三级审核</h3>
                                        <el-switch v-model="invoiceAudit3" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="指定人员拥有确认开票的权限，按提交人的所属部门来确认开票人。" placement="top">
                                        <h3>确认开票</h3>
                                        <el-table :data="confirmInvoiceTableData" border
                                            style="width: 100%; margin-top: 10px;">
                                            <el-table-column prop="id" label="序号" width="80"></el-table-column>
                                            <el-table-column prop="scope" label="审核权限范围"></el-table-column>
                                            <el-table-column prop="person" label="审核人"></el-table-column>
                                            <el-table-column prop="operation" label="操作" width="120"></el-table-column>
                                        </el-table>
                                    </el-timeline-item>
                                </el-timeline>
                            </template>

                            <!-- 退款流程 -->
                            <template v-if="activeFlow === 'refundFlow'">
                                <el-timeline>
                                    <el-timeline-item timestamp="任何人都可以进行申请" placement="top">
                                        <h3>提交退款申请</h3>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>退款一级审核</h3>
                                        <el-switch v-model="refundAudit1" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>退款二级审核</h3>
                                        <el-switch v-model="refundAudit2" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="可指定人员拥有审核权限，按提交人的所属部门来确认审核人。" placement="top">
                                        <h3>退款三级审核</h3>
                                        <el-switch v-model="refundAudit3" inactive-text=""></el-switch>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="指定人员拥有确认退款的权限，按提交人的所属部门来确认权限。" placement="top">
                                        <h3>确认退款</h3>
                                        <el-table :data="confirmRefundTableData" border
                                            style="width: 100%; margin-top: 10px;">
                                            <el-table-column prop="id" label="序号" width="80"></el-table-column>
                                            <el-table-column prop="scope" label="审核权限范围"></el-table-column>
                                            <el-table-column prop="person" label="审核人"></el-table-column>
                                            <el-table-column prop="operation" label="操作" width="120"></el-table-column>
                                        </el-table>
                                    </el-timeline-item>
                                    <el-timeline-item timestamp="合同、订单、项目相关人员操作终止。" placement="top">
                                        <h3>终止相关业务单据</h3>
                                    </el-timeline-item>
                                </el-timeline>
                            </template>
                        </el-col>
                    </el-row>
                </div>
            </template>

            <!-- 选项值设置内容 -->
            <template v-if="activeTopTab === 'optionSetting'">
                <div class="option-setting">
                    <el-row>
                        <el-col :span="4" class="sidebar">
                            <el-menu default-active="paymentAccount" class="el-menu-vertical-demo"
                                @select="handleOptionMenuSelect">
                                <el-menu-item index="paymentAccount">收付款账户</el-menu-item>
                                <el-menu-item index="expenseType">支出类型</el-menu-item>
                                <el-menu-item index="expensePayer">支出收款方</el-menu-item>
                                <el-menu-item index="invoiceSeller">开票销售方</el-menu-item>
                            </el-menu>
                        </el-col>
                        <el-col :span="20" class="main-content">
                            <!-- 收付款账户 -->
                            <template v-if="activeOption === 'paymentAccount'">
                                <div class="option-header">
                                    <el-button type="primary" size="small">+ 添加选项</el-button>
                                    <div class="option-desc">在以下账户空白处鼠标可点击拖动，调整先后顺序</div>
                                </div>
                                <el-table :data="paymentAccountTableData" border style="width: 100%; margin-top: 10px;">
                                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
                                    <el-table-column prop="name" label="账户名称"></el-table-column>
                                    <el-table-column prop="enabled" label="启用">
                                        <template #default="scope">
                                            <el-switch v-model="scope.row.enabled" inactive-text=""></el-switch>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="account" label="账号"></el-table-column>
                                    <el-table-column prop="remark" label="备注"></el-table-column>
                                    <el-table-column prop="receiptStamp" label="收据盖章"></el-table-column>
                                    <el-table-column prop="receiptImage" label="收款图片"></el-table-column>
                                    <el-table-column prop="operation" label="操作" width="120"></el-table-column>
                                </el-table>
                            </template>

                            <!-- 支出类型 -->
                            <template v-if="activeOption === 'expenseType'">
                                <div class="option-header">
                                    <el-button type="primary" size="small">+ 添加分类</el-button>
                                    <el-input placeholder="搜索类型" prefix-icon="Search" size="small"
                                        class="search-input"></el-input>
                                    <el-button type="primary" size="small" class="add-button">添加支出类型</el-button>
                                </div>
                                <el-row>
                                    <el-col :span="4" class="category-sidebar">
                                        <el-menu default-active="allCategory" class="el-menu-vertical-demo">
                                            <el-menu-item index="allCategory">全部分类</el-menu-item>
                                            <el-menu-item index="businessCost">业务成本</el-menu-item>
                                            <el-menu-item index="internalCost">内部成本</el-menu-item>
                                            <el-menu-item index="administrativeExpense">行政支出</el-menu-item>
                                        </el-menu>
                                    </el-col>
                                    <el-col :span="16">
                                        <el-table :data="expenseTypeTableData" border style="width: 100%;">
                                            <el-table-column prop="id" label="编号" width="80"></el-table-column>
                                            <el-table-column prop="type" label="支出类型"></el-table-column>
                                            <el-table-column prop="remark" label="备注"></el-table-column>
                                            <el-table-column prop="expenseLimitReminder" label="支出上限金额提醒">
                                                <template #default="scope">
                                                    <el-checkbox v-model="scope.row.expenseLimitReminder"></el-checkbox>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="strictlyControlLimit" label="严格控制上限金额">
                                                <template #default="scope">
                                                    <el-checkbox v-model="scope.row.strictlyControlLimit"></el-checkbox>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="associatedContract" label="关联合同订单">
                                                <template #default="scope">
                                                    <el-checkbox v-model="scope.row.associatedContract"></el-checkbox>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="enabled" label="启用">
                                                <template #default="scope">
                                                    <el-switch v-model="scope.row.enabled" inactive-text=""></el-switch>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="operation" label="操作" width="120"></el-table-column>
                                        </el-table>
                                    </el-col>
                                </el-row>
                            </template>

                            <!-- 支出收款方 -->
                            <template v-if="activeOption === 'expensePayer'">
                                <div class="option-header">
                                    <el-button type="primary" size="small">+ 添加选项</el-button>
                                    <div class="option-desc">在以下账户空白处鼠标可点击拖动，调整先后顺序</div>
                                </div>
                                <el-table :data="expensePayerTableData" border style="width: 100%; margin-top: 10px;">
                                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
                                    <el-table-column prop="name" label="收款方户名"></el-table-column>
                                    <el-table-column prop="account" label="收款账号"></el-table-column>
                                    <el-table-column prop="bank" label="开户银行"></el-table-column>
                                    <el-table-column prop="enabled" label="启用">
                                        <template #default="scope">
                                            <el-switch v-model="scope.row.enabled" inactive-text=""></el-switch>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="operation" label="操作" width="120"></el-table-column>
                                </el-table>
                            </template>

                            <!-- 开票销售方 -->
                            <template v-if="activeOption === 'invoiceSeller'">
                                <div class="option-header">
                                    <el-button type="primary" size="small">+ 添加选项</el-button>
                                    <div class="option-desc">在以下账户空白处鼠标可点击拖动，调整先后顺序</div>
                                </div>
                                <el-table :data="invoiceSellerTableData" border style="width: 100%; margin-top: 10px;">
                                    <el-table-column prop="id" label="序号" width="80"></el-table-column>
                                    <el-table-column prop="name" label="销售方名称"></el-table-column>
                                    <el-table-column prop="taxId" label="纳税人识别号"></el-table-column>
                                    <el-table-column prop="enabled" label="启用">
                                        <template #default="scope">
                                            <el-switch v-model="scope.row.enabled" inactive-text=""></el-switch>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="operation" label="操作" width="120">
                                        <template #default="scope">
                                            <el-button type="text" text-color="#ff4d4f" size="small">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-col>
                    </el-row>
                </div>
            </template>

            <!-- 权限设置内容 -->
            <template v-if="activeTopTab === 'permissionSetting'">
                <div class="permission-setting">
                    <el-card>
                        <div class="permission-item">
                            <h3>
                                <span class="permission-tag">管理版</span>
                                收费数据导出
                            </h3>
                            <p class="permission-desc">默认仅机构负责人拥有收费数据的导出权限，也可以指定其他人。</p>
                            <p class="permission-desc">收费数据包含：收费登记数据导出、对账审核数据导出、收费进度数据导出（代账费进度跟踪、其他订单进度跟踪）。</p>
                            <div class="permission-person">张小姐</div>
                        </div>

                        <div class="permission-item">
                            <h3>
                                <span class="permission-tag">管理版</span>
                                收款审核权限
                            </h3>
                            <p class="permission-desc">指定人员负责收费的对账审核，按照客户所属部门确定审核人。</p>
                            <el-table :data="receiptAuditTableData" border style="width: 100%; margin-top: 10px;">
                                <el-table-column prop="id" label="序号" width="80"></el-table-column>
                                <el-table-column prop="scope" label="审核权限范围"></el-table-column>
                                <el-table-column prop="persons" label="审核人"></el-table-column>
                                <el-table-column prop="operation" label="操作" width="120"></el-table-column>
                            </el-table>
                        </div>

                        <div class="permission-item">
                            <div class="permission-row">
                                <h3>收费登记必须上传附件</h3>
                                <el-switch v-model="mustUploadAttachment" inactive-text=""></el-switch>
                            </div>
                            <p class="permission-desc">登记收费记录时，必须上传附件才可登记。</p>
                        </div>

                        <div class="permission-item">
                            <div class="permission-row">
                                <h3>临时收费</h3>
                                <el-switch v-model="temporaryCharge" inactive-text=""></el-switch>
                            </div>
                            <p class="permission-desc">开启后，只有指定人员可增加临时收费。</p>
                        </div>

                        <div class="permission-item">
                            <h3>收费流水导入、导出、删除</h3>
                            <p class="permission-desc">收费认领模块，导入、导出、删除收费流水功能的权限。</p>
                            <div class="permission-person">张小姐</div>
                        </div>
                    </el-card>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 顶部标签状态
const activeTopTab = ref('flowSetting');

// 流程设置相关状态
const activeFlow = ref('expenseFlow');
const expenseAudit1 = ref(false);
const expenseAudit2 = ref(false);
const expenseAudit3 = ref(false);
const expenseAudit4 = ref(false);
const financialAudit = ref(false);

const cashierConfirmTableData = ref([
    { id: 1, scope: '百账汇（广州）科技有限公司', person: '张小姐', operation: '' }
]);

const invoiceAudit1 = ref(false);
const invoiceAudit2 = ref(false);
const invoiceAudit3 = ref(false);

const confirmInvoiceTableData = ref([
    { id: 1, scope: '百账汇（广州）科技有限公司', person: '张小姐', operation: '' }
]);

const refundAudit1 = ref(false);
const refundAudit2 = ref(false);
const refundAudit3 = ref(false);

const confirmRefundTableData = ref([
    { id: 1, scope: '百账汇（广州）科技有限公司', person: '张小姐', operation: '' }
]);

// 选项值设置相关状态
const activeOption = ref('paymentAccount');

const paymentAccountTableData = ref([
    { id: 1, name: '现金', enabled: true, account: '', remark: '备注，可输入账户账号/卡号，开户行等', receiptStamp: '', receiptImage: '', operation: '' },
    { id: 2, name: '银行转账', enabled: true, account: '', remark: '备注，可输入账户账号/卡号，开户行等', receiptStamp: '', receiptImage: '', operation: '' },
    { id: 3, name: '支付宝', enabled: true, account: '', remark: '备注，可输入账户账号/卡号，开户行等', receiptStamp: '', receiptImage: '', operation: '' },
    { id: 4, name: '微信支付', enabled: true, account: '', remark: '备注，可输入账户账号/卡号，开户行等', receiptStamp: '', receiptImage: '', operation: '' },
    { id: 5, name: '其他', enabled: true, account: '', remark: '备注，可输入账户账号/卡号，开户行等', receiptStamp: '', receiptImage: '', operation: '' }
]);

const expenseTypeTableData = ref([
    { id: 1, type: '刻章', remark: '', expenseLimitReminder: false, strictlyControlLimit: true, associatedContract: false, enabled: true, operation: '' },
    { id: 2, type: '地址费', remark: '', expenseLimitReminder: false, strictlyControlLimit: true, associatedContract: false, enabled: true, operation: '' },
    { id: 3, type: '材料费', remark: '', expenseLimitReminder: false, strictlyControlLimit: true, associatedContract: false, enabled: true, operation: '' },
    { id: 4, type: '外包成本', remark: '', expenseLimitReminder: false, strictlyControlLimit: true, associatedContract: false, enabled: true, operation: '' },
    { id: 5, type: '其他成本', remark: '', expenseLimitReminder: false, strictlyControlLimit: true, associatedContract: false, enabled: true, operation: '' }
]);

const expensePayerTableData = ref([]);

const invoiceSellerTableData = ref([
    { id: 1, name: '百账汇（广东）科技有限公司', taxId: '360424199207012187', enabled: true }
]);

// 权限设置相关状态
const mustUploadAttachment = ref(false);
const temporaryCharge = ref(false);

const receiptAuditTableData = ref([
    { id: 1, scope: '百账汇（广州）科技有限公司', persons: '张小姐 匡梦思 邓硕', operation: '' }
]);

// 顶部标签切换事件
const handleTopTabChange = (tab) => {
    activeTopTab.value = tab;
};

// 流程设置菜单切换事件
const handleFlowMenuSelect = (index) => {
    activeFlow.value = index;
};

// 选项值设置菜单切换事件
const handleOptionMenuSelect = (index) => {
    activeOption.value = index;
};
</script>

<style lang="less" scoped>
.app-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
}

.content-wrapper {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.sidebar {
    border-right: 1px solid #e6e6e6;
}

.main-content {
    padding-left: 20px;
}

.el-timeline {
    padding: 20px 0;
}

.el-timeline-item {
    margin-bottom: 20px;
}

.el-timeline-item__timestamp {
    color: #606266;
    font-size: 14px;
}

.option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.option-desc {
    color: #606266;
    font-size: 13px;
}

.search-input {
    width: 200px;
    margin: 0 10px;
}

.add-button {
    margin-left: auto;
}

.category-sidebar {
    border-right: 1px solid #e6e6e6;
    padding-right: 10px;
}

.permission-setting {
    padding: 20px;
}

.permission-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
}

.permission-item:last-child {
    border-bottom: none;
}

.permission-tag {
    display: inline-block;
    background-color: #e6f7ff;
    color: #1890ff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
}

.permission-desc {
    color: #606266;
    margin: 10px 0;
    line-height: 1.6;
}

.permission-person {
    color: #303133;
    margin-top: 5px;
    padding-left: 24px;
}

.permission-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>